/* @description

Styles for form fields and form layouts
These forms are all set up for label above field
Add a 'layout' class to your form/fieldset to allow non-linear forms

Package: mmkit - HTML and CSS library
URL: http://code.google.com/p/mmkit/
License: http://www.opensource.org/licenses/mit-license.php

*/

/* @group Clearfix */
form .field:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
form .field { display: inline-block; }
* html form .field { height: 1%; }
form .field { display: block; }
/* @end */

.field label {

}

.field label .required, .field label .req {
	color: red;
	border: none;
	vertical-align: super;
	font-size: 0.7em;
	font-style: italic;
}

.field .hint {
	color: #777;
	margin: 0.25em 0;
}
fieldset {
	border-color: #CCC;
}
* html fieldset {
	padding-top: 1em;
}
*+html fieldset {
	padding-top: 1em;
}
* html legend {margin-left: -7px;}
*+html legend {margin-left: -7px;}

form .field, form .buttons {margin: 0 0 1.5em;}
form .field label {display: block;}

/* @group Radios and Checkboxes */
.field .options label {
	line-height: 1.4;
	font-weight: normal;
	margin-bottom: 0.4em;
}
* html .field .options label {
	margin-bottom: 0.1em; /* Smaller bottom margin for IE */
}
*+html .field .options label{
	margin-bottom: 0.1em; /* Smaller bottom margin for IE */
}
.field .options label {

}
input.radio, input.checkbox {vertical-align: top; margin-top: 0; margin-left: 0;}
* html input.radio, * html input.checkbox {vertical-align: baseline;}
*+html input.radio, *+html input.checkbox {vertical-align: baseline;}

/* @end */

input.text, input.password, textarea, select {margin: 0; vertical-align: baseline;}
.error label { color: red;}
.error .options label { color: #222; }

/* @group Form with a gridded layout */
.layout .text,
.layout textarea,
.layout select
 { /* Modern browsers only, requires a fallback */
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-khtml-box-sizing: border-box;
}
.layout .field-25 {
	float: left;
	width: 24.25%;
	margin-left: 1%;
}
* html .layout .field-25 .text,
* html .layout .field-25 textarea {
	width: 95%;
	padding-left: 2%;
	padding-right: 2%;
}
*+html .layout .field-25 .text,
*+html .layout .field-25 textarea {
	width: 95%;
	padding-left: 2%;
	padding-right: 2%;
}
.layout .field-50 {
	float: left;
	width: 49.5%;
	margin-left: 1%;
}
* html .layout .field-50 .text,
* html .layout .field-50 textarea {
	width: 97%;
	padding-left: 1%;
	padding-right: 1%;
}
*+html .layout .field-50 .text,
*+html .layout .field-50 textarea {
	width: 97%;
	padding-left: 1%;
	padding-right: 1%;
}

.layout .field-75 {
	float: left;
	width: 74.75%;
	margin-left: 1%;
}
* html .layout .field-75 .text,
* html .layout .field-75 textarea {
	width: 98%;
	padding-left: 1%;
	padding-right: 1%;
}
*+html .layout .field-75 .text,
*+html .layout .field-75 textarea {
	width: 98%;
	padding-left: 1%;
	padding-right: 1%;
}
.layout .field-100 {
	float: left;
	width: 100%;
	clear: left;
}
* html .layout .field-100 .text,
* html .layout .field-100 textarea {
	width: 97%;
	padding-left: 1%;
	padding-right: 1%;
}
*+html .layout .field-100 .text,
*+html .layout .field-100 textarea {
	width: 97%;
	padding-left: 1%;
	padding-right: 1%;
}

.layout .field-30 {
	width: 29.5%;
	clear: left;
	margin-right: 1%;
}
*+html .layout .field-30 .text,
*+html .layout .field-30 textarea {
	width: 98%;
	margin-right: 0.5%;
}

.layout .field-first {
	clear: left;
	margin-left: 0%;
}
.layout .buttons {
	clear: left;
}

/* @end */